<template>
  <div class="container" >
    <elm-header  :title="location.name" @clickTitle="handleHaderTitleClick">
      <template slot="left">
        <van-icon name="search" color="#fff" size=".24rem"  @click="$router.push({name:'search'})"/>
      </template>
       <template slot="right">
        <van-icon name="user-circle-o" color="#fff" size=".24rem" @click="$router.push({name:'profile'})"/>
      </template>
    </elm-header>
    <!-- 滚动区域 -->
    <div class="scroller">
      <!-- 食物分类 -->
      <van-swipe :loop='false'>
        <van-swipe-item>
          <food-grid :geohash="geohash" :cates="cateList1"></food-grid>
        </van-swipe-item>
        <van-swipe-item>
          <food-grid :geohash="geohash" :cates="cateList2"></food-grid>
        </van-swipe-item>
      </van-swipe>
      <!-- 附近商家 -->
      <van-sticky offset-top="0.44rem">
        <div class="list-header">
          <van-icon name="shop-o" />
          <span>附近商家</span>
        </div>
      </van-sticky>
      <shop-list :shops="nearShopList" ></shop-list>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import foodGrid from './components/foodGrid'
import shopList from '../../components/shopList'
import {getFoodsCates} from '../../api/category'
import {getShops} from '../../api/restaurant'
import { mapState } from 'vuex'

export default {
  components:{
    'elm-header' : elmHeader,
    'food-grid' : foodGrid,
    'shop-list': shopList
  },
  props:{
    geohash:{
      type: String,
      default: '116.397128,39.916527'
    },
    title:String,
    restaurant_category_id:Number
  },
  created(){
    this.getFoodsCateList()
    this.getShopList()
  },
  computed:{
    ...mapState(['location']),
  },
  data(){
    return {
      cateList1:[],
      cateList2:[],
      nearShopList:[]
    }
  },
  methods:{
    // 点击头部标题
    handleHaderTitleClick(){
      // 跳转到定位页面
      this.$router.push({path:'/msite'})
    },
    // 获取食品分类
    async getFoodsCateList(){
      try {
        const data = await getFoodsCates()
        // console.log(data);
        this.cates = data
        for(let i=0; i<8; i++){
          this.cateList1.push(data[i])
          if(data[i+8]){
            this.cateList2.push(data[i+8])
          }
          
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取附近商铺
    async getShopList(){
   
      const {latitude, longitude} = this.location
      try {
        const data = await getShops({
          latitude,
          longitude
        })
        // console.log(data);
        this.nearShopList = data
      } catch (err) {
        console.log(err);
      }
    },
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/var.scss';
@import '../../styles/mixin.scss';
.container{
  @include container;
}
.scroller{
  @include scroller;
  margin-bottom: 50px;
  .van-swipe{
    position: relative;
    /deep/ .van-swipe__indicator--active{
      background-color: $primary;
    }
  }
  .list-header{
    height: .4rem;
    line-height: .4rem;
    padding-left: .1rem;
    background-color: #FFF;
    *{
      vertical-align: middle;
    }
  }
}


</style>